<template>
  <body>
  <div class="top-nav">
    <div class="container clearf">
      <div class="left">
        <router-link to="/main"><a class="item">首页</a></router-link>
      </div>
      <div class="right">

        <template v-if="account.account_userid !== undefined">
          <router-link to="/orders/listOrder"><a href="#" class="item">我的订单</a></router-link>
          <a @click="signOff" class="item">退出登录</a>
          <router-link to="/account/myAccountForm"><a href="#" class="item">个人主页</a></router-link>
        </template>

        <template v-else>
          <router-link to="/orders/listOrder"><a href="#" class="item">我的订单</a></router-link>
          <router-link to="/account/registerForm"><a href="#" class="item">注册</a></router-link>
          <router-link to="/account/signonForm"><a href="#" class="item">登录</a></router-link>
        </template>

      </div>
    </div>
    <div class="header">
      <div class="container clearf">
        <div class="col-2 logo">宠物商店</div>
        <div class="col-5 search-bar">

          <!--搜索栏目-->
          <form action="searchProduct" method="post" @submit.prevent="searchProducts">
            <input type="text"  id="keyword" name="keyword" size="14" v-model="searchKeyword"  />
            <router-link to="/catalog/SearchProducts" @click="searchProducts()">
              <button type="submit" name="searchProducts" value="Search">搜索</button>
            </router-link>
          </form>

          <div id="productAutoComplete" class="productAutoComplete">
            <ul id="productAutoList" class="productAutoList">
            </ul>
          </div>

        </div>

        <div class="col-2 cart">
          <router-link to="/cart/cart"><a href="#" class="item">我的购物车</a></router-link>
        </div>

      </div>
    </div>
    <div class="main-promote">
      <!--以上是头部信息-->
      <div id="BackLink">
        <a href="viewProduct?productId=${sessionScope.product.productId}">Return to {{store.state.product.productName}}</a>
      </div>
      <div class="public-shop-cart-two">
        <div class="content">
          <span>全部商品</span>

          <div class="cart-title">
            <span>商品</span>
            <span>商品ID</span>
            <span>所属小类ID</span>
            <span>商品信息</span>
            <span>单价</span>
            <span>数量</span>
            <span>小计</span>
            <span>操作</span>
          </div>
<!--          如果购物车是空的-->
<!--          v-if="cartItem.length === 0"-->
          <div v-if="allCartItems[0] == undefined" class="cart-detail">
            <div class="cart-price">你的购物车是空的，快去挑选商品吧！！！！！</div>
          </div>
          <div v-for="cartItem in allCartItems" :key="cartItem.item.itemId" class="cart-detail" v-else>
            <div class="cart-title">
              <img :src="cartItem.item.attribute5" />
            </div>
            <div class="cart-price">
              <a :href="'viewItem?itemId=' + cartItem.item.itemId">{{ cartItem.item.itemId }}</a>
            </div>
            <div class="cart-price">{{ cartItem.item.productId }}</div>
            <div class="cart-price">
              {{ cartItem.item.attribute1 }} {{ cartItem.item.attribute2 }}
              {{ cartItem.item.attribute3 }} {{ cartItem.item.attribute4 }}
<!--              {{ cartItem.item.product.name }}-->
            </div>
            <div class="cart-price">
              <span>价格：</span>
              <span class="formattedPrice">{{ cartItem.item.listPrice | formatCurrency }}</span>
            </div>
            <div class="cart-number">
              <input type="text" :id="cartItem.item.itemId" class="cartQuantity" :name="cartItem.item.itemId" :value="cartItem.quantity">
              <div id="cartMsg"></div>
            </div>
            <div class="cart-subtotal" :id="cartItem.item.itemId + 'total'">
              <span class="formattedPrice">{{ cartItem.item.listPrice | formatCurrency }}</span>
            </div>
            <div class="cart-oprate">
              <a :href="'removeItemFromCart?workingItemId=' + cartItem.item.itemId">删除</a>
            </div>
          </div>

          <div>
<!--            v-if="cartItems.length > 0"-->
            <div  class="cart-btn">
              <span>总价：</span>
              <span id="subtotal"> ¥{{ cartSubTotal.total }}</span>
              <button class="btn">
<!--                :href="getCheckoutUrl(cartItems[0].item.itemId)"-->
                <router-link to="/orders/newOrder"><a>去结算</a></router-link>
              </button>
            </div>
          </div>
        </div>

        <!--以下是尾部信息-->
    </div>
  </div>
  <div class="footer">
    <div class="container clearf">
      <div class="">

        增值电信业务经营许可证：浙B2-20080224|增值电信业务经营许可证（跨地区）： B2-20150210|浙网文【2022】0403-017号|浙江省网络食品销售第三方平台提供者备案：浙网食A33010001|

        互联网药品信息服务资格证书（浙）-经营性-2018-0010|短消息类服务接入代码使用证书：号【2016】00154-A01|信息网络传播视听许可证：1109364号|出版物网络交易平台服务经营备案号：新出发浙备字第002号|</div>
    </div>
  </div>
  </div>
  </body>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import api from "../../api/index";
import { useStore } from 'vuex'

const cartSubTotal= reactive({
  total:0
})
const store = useStore()
const cartsSession = reactive([])//这是一个数组
const allCartItems = reactive([])//这是一个数组
const cart_form = reactive({
  itemId:'',
  productId:'',
  listPrice:'',
  unitCost: '',
  supplierId: '',
  status: '',
  attribute1:'',
  attribute2:'',
  attribute3:'',
  attribute4:'',
  attribute5:''
})

const account = reactive({
  account_userid:'0',
  account_email:'',
  account_firstname:'',
  account_lastname:'',
  account_status:'',
  account_addr1:'',
  account_addr2:'',
  account_city:'',
  account_state:'',
  account_zip:'',
  account_country:'',
  account_phone:'',
  account_favCategory:''
})

//页面刚出现时调用的方法
onMounted(() => {
  console.log(store.state.account_userid);
  account.account_userid=store.state.account_userid;
  account.account_email=store.state.account_email;
  account.account_firstname=store.state.account_firstname;
  account.account_lastname=store.state.account_lastname;
  account.account_status=store.state.account_status;
  account.account_addr1=store.state.account_addr1;
  account.account_addr2=store.state.account_addr2;
  account.account_city=store.state.account_city;
  account.account_state=store.state.account_state;
  account.account_zip=store.state.account_zip;
  account.account_country=store.state.account_country;
  account.account_phone=store.state.account_phone;
  account.account_favCategory=store.state.account_favCategory;
  console.log(account.account_userid);
  getData();
  console.log("6");
})
//页面刚出现时调用的方法
const getData = () => {
  //测试后端向前端传数据，成功！
  api.getCart().then(res => {
    //这里首先要判断一下状态码
    console.log(res)
    var statusCode = res.data.status;
    console.log("statusCode is : "+statusCode);
    cartsSession.splice(0, cartsSession.length)//清空旧数据
    cartsSession.push(...res.data.data);//update,from date results,第一个data是http里的，这个data包括我们的status,message和data。第二个data是我们commonResponse里面的，存的就是orderList.
    console.log(cartsSession);
    allCartItems.splice(0,allCartItems.length);
    for (let i = 0; i < cartsSession[0].allCartItems.length; i++) {
      allCartItems.push(cartsSession[0].allCartItems[i]);
      cartSubTotal.total=cartsSession[0].allCartItems[i].total+cartSubTotal.total;
    }//存放CartItem
    console.log(allCartItems);
    console.log(allCartItems[0]);
    console.log(allCartItems[0].total);//测试是否能取到值，测试成功
    //存给account_form
    cart_form.productId=cartsSession[0].productId;
    cart_form.unitCost=cartsSession[0].unitCost;
    cart_form.itemId=cartsSession[0].itemId;
    cart_form.status=cartsSession[0].status;
    cart_form.listPrice=cartsSession[0].listPrice;
    cart_form.supplierId=cartsSession[0].supplierId;
    cart_form.attribute1=cartsSession[0].attribute1;
    cart_form.attribute2=cartsSession[0].attribute2;
    cart_form.attribute3=cartsSession[0].attribute3;
    cart_form.attribute4=cartsSession[0].attribute4;
    cart_form.attribute5=cartsSession[0].attribute5;


    //存给ordersSession，持久化对象，这就是前端存储session的方法！一共28个属性！
    store.commit("setCartPrice",cartsSession[0].listPrice);
    store.commit("setCartSupplier",cartsSession[0].supplierId);
    store.commit("setCartAttr1",cartsSession[0].attribute1);
    store.commit("setCartAttr2",cartsSession[0].attribute2);
    store.commit("setCartAttr3",cartsSession[0].attribute3);
    store.commit("setCartAttr4",cartsSession[0].attribute4);
    store.commit("setCartAttr5",cartsSession[0].attribute5);
    store.commit("setCartUnitCost",cartsSession[0].unitCost);
    store.commit("setCartState",cartsSession[0].status);
    store.commit("setCartItemId",cartsSession[0].itemId);
    store.commit("setCartProduct",cartsSession[0].productId);
  })
}

const signOff = () =>{
  //清除客户端的session
  store.commit("setAccountUserid",'');
  store.commit("setAccountEmail",'');
  store.commit("setAccountFirstName",'');
  store.commit("setAccountLastName",'');
  store.commit("setAccountStatus",'');
  store.commit("setAccountAddr1",'');
  store.commit("setAccountAddr2",'');
  store.commit("setAccountCity",'');
  store.commit("setAccountState",'');
  store.commit("setAccountZip",'');
  store.commit("setAccountCountry",'');
  store.commit("setAccountPhone",'');
  store.commit("setAccountfavCategory",'');
  //清楚服务端的session，这里又要请求服务器了，我先不写吧。
  //清楚页面中的account
  account.account_userid=store.state.account_userid;
  account.account_email=store.state.account_email;
  account.account_firstname=store.state.account_firstname;
  account.account_lastname=store.state.account_lastname;
  account.account_status=store.state.account_status;
  account.account_addr1=store.state.account_addr1;
  account.account_addr2=store.state.account_addr2;
  account.account_city=store.state.account_city;
  account.account_state=store.state.account_state;
  account.account_zip=store.state.account_zip;
  account.account_country=store.state.account_country;
  account.account_phone=store.state.account_phone;
  account.account_favCategory=store.state.account_favCategory;
  //重返本页面
  // 使用 location.reload() 方法重新刷新页面
  location.reload();
}

</script>

<style scoped>
@import "../../assets/css/TopButtomMain.css";
@import "../../assets/css/order.css";
</style>